import React from 'react'
import { ReactGhLikeDiff } from 'react-gh-like-diff'
import 'react-gh-like-diff/lib/diff2html.min.css'

export default class DiffTaskModal extends React.Component {

  getContent = task => {
    const {assignments = []} = task
    return `-----------------------title----------------------
${task.title}
-----------------------description----------------------
${task.content}
-----------------------assignments----------------------
${assignments.map(assignment => {
      return `title: ${assignment.title} | quizzes：${assignment.quizzesId}`
    }).join('\n')}
`
  }

  render () {
    const {source, diff = {}} = this.props
    return <ReactGhLikeDiff
      past={this.getContent(source)}
      current={this.getContent(diff)}
      options={{
        originalFileName: source.title,
        updatedFileName: diff.title,
        inputFormat: 'diff',
        outputFormat: 'side-by-side',
        showFiles: true,
        matchWordsThreshold: 0.25,
        matchingMaxComparisons: 2500
      }}
    />
  }
}